<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识弹性盒子</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: bisque;
            margin: 50px auto;
            overflow: hidden;  /* 避免 li标签的外边距击穿，使用在父元素上。 */
            list-style-type: none;
            padding: 0;
            display: flex;  /* 设置成弹性盒子后，盒子里面的元素就成了弹性元素，弹性元素会自动排列成一行。块级元素是成列排列的。 */
        }
        .row{
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: aquamarine;
            color: red;
            margin-top: 10px;

        }
    </style>
</head>
<body>
    <div>  
        <p>弹性盒子是一种布局的方式，也叫 flex布局。</p>
        <p>在 CSS中，有下面 5种布局方式：</p>
        <p>1、块布局：用来布置文件，包含以文档为中心的功能，例如浮动元素或将其放置在多列的功能。</p>
        <p>2、行内布局：用来布置文本。</p>
        <p>3、表格布局：用来布置表格。</p>
        <p>4、定位布局：用来对那些与其他元素无交互的定位元素进行布置。</p>
        <p>5、弹性盒子布局：用来布置那些可以顺利调整大小的复杂页面。</p>
        <p>设置成弹性盒子后，盒子里面的元素就成了弹性元素，弹性元素会自动排列成一行。块级元素是成列排列的。 </p>
    </div>
    <div>
        <ul class="box">
            <li class="row">弹性布局1</li>
            <li class="row">弹性布局2</li>
            <li class="row">弹性布局3</li>
        </ul>
    </div>
</body>
</html>